
<template>
  <div class="swiper-container">
    <swiper ref="mySwiper" :style="{height:Height, width:Width}" :options="{
      slidesPerView, 
      direction,
      autoplay,
      loop,
      pagination: {
          el: '.swiper-pagination'
        },
      }">
      <swiper-slide v-for="(item, index) in slideList" :key="item.title + index"><a :href="item.link" :style="{height:imgHeight ? imgHeight : Height, width: imgWidth? imgWidth : Width}"><img
            :src="item.imgUrl" alt=""></a>
      </swiper-slide>
      <div class="swiper-pagination" v-if="showPagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'vue-swiper',
  props: {
    Height: {
      type: String,
      default: '200px'
    },
    Width: {
      type: String,
      default: '100%'
    },
    imgHeight: {
      type: String,
      default: '100%'
    },
    imgWidth: {
      type: String,
      default: '100%'
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    slidesPerView: {
      type: Number,
      default: 1 // 每次显示个数
    },
    // 自动轮播
    autoplay: {
      type: Object | Boolean,
      default() {
        return {
          delay: 2000,
          disableOnInteraction: false
        }
      }
    },
    loop: {
      type: Boolean,
      default: true // 无限轮播
    },
    showPagination: {
      type: Boolean,
      default: true // 无限轮播
    },
    slideList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {},
  data() {
    return {}
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    // this.swiper.slideTo(2, 1000, false)
  }
}
</script>

<style lang="less" scoped>
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  // height: 200px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
